<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="team" v-if="team">
      <div class="team_expertise">
        <h1 class="team_expertise_tltle">团队擅长</h1>
        <p class="content">{{ team.context }}</p>
        <p class="team_members">
          <span class="member">团队成员</span>
          <span class="num">（10人）</span>
          <span class="whole">查看全部</span>
        </p>
        <div class="team_list">
          <div class="specific_members">
            <img :src="team.img" alt="" />
            <span class="members_name">{{ team.name }}</span>
            <span class="member_position">主任医师</span>
            <span class="leading_expert">领衔专家</span>
          </div>
          <div class="specific_members">
            <img
              src="https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u156.png"
              alt=""
            />
            <span class="members_name">沈莫</span>
            <span class="member_position">主任医师</span>
          </div>
          <div class="specific_members">
            <img
              src="https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u168.png"
              alt=""
            />
            <span class="members_name">张苏</span>
            <span class="member_position">主任医师</span>
          </div>
          <div class="specific_members">
            <img
              src="https://cdn7.axureshop.com/demo/1763441/images/%E5%9B%A2%E9%98%9F%E8%AF%A6%E7%BB%86%E9%A1%B5/u1014.png"
              alt=""
            />
            <span class="members_name">李岚</span>
            <span class="member_position">副主任医师</span>
          </div>
        </div>
      </div>
      <div class="appointment_number_source">
        <h1 class="title">预约号源</h1>
        <ul class="clinic">
          <li
            v-for="(item, index) in tiemList"
            :key="index"
            @click="clinicAction(index)"
            :class="{ active: value == index }"
          >
            <span>{{ item.week }}</span>
            <span>{{ item.date }}</span>
            <span>{{ item.current }}</span>
          </li>
        </ul>
        <p class="prompt">
          <img
            src="https://cdn7.axureshop.com/demo/1763441/images/%E9%80%89%E6%8B%A9%E5%8F%B7%E6%BA%90/u356.png"
            alt=""
          />
          <span>15：00放出第八天号源</span>
        </p>
        <div class="morning">
          <h1 class="morning_title" ref="str2">上午号源</h1>
          <p class="morning_list">
            <span class="morning_list_name">
              {{ team.name }}知名专家团队-专家号
            </span>
            <span class="morning_list_price">{{ team.price }}</span>
            <span
              class="morning_list_num"
              v-if="team.num"
              @click="NumberAction($refs.str2.innerHTML)"
            >
              剩余{{ team.num }}
            </span>
            <span class="morning_list_num booked" v-else>约满</span>
          </p>
          <p class="morning_context">{{ team.context }}</p>

          <p class="morning_list">
            <span class="morning_list_name">
              {{ team.name }}知名专家团队-普通号
            </span>
            <span class="morning_list_price">{{ team.price }}</span>
            <span
              class="morning_list_num"
              v-if="team.num"
              @click="NumberAction($refs.str2.innerHTML)"
              >剩余{{ team.num }}</span
            >
            <span class="morning_list_num booked" v-else>约满</span>
          </p>
          <p class="morning_context">{{ team.context }}</p>
        </div>
        <div class="afternoon">
          <h1 class="morning_title" ref="str3">下午号源</h1>
          <p class="morning_list">
            <span class="morning_list_name">
              {{ team.name }}知名专家团队-专家号
            </span>
            <span class="morning_list_price">{{ team.price }}</span>
            <span
              class="morning_list_num"
              v-if="team.num"
              @click="NumberAction($refs.str3.innerHTML)"
              >剩余{{ team.num }}</span
            >
            <span class="morning_list_num booked" v-else>约满</span>
          </p>
          <p class="morning_context">{{ team.context }}</p>

          <p class="morning_list">
            <span class="morning_list_name">
              {{ team.name }}知名专家团队-普通号
            </span>
            <span class="morning_list_price">{{ team.price }}</span>
            <span
              class="morning_list_num"
              v-if="team.num"
              @click="NumberAction($refs.str3.innerHTML)"
              >剩余{{ team.num }}</span
            >
            <span class="morning_list_num booked" v-else>约满</span>
          </p>
          <p class="morning_context">{{ team.context }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      data: [],
      id: "",
      tiemList: [
        {
          week: "今日",
          date: "3/15",
          current: "有号",
        },
        {
          week: "周二",
          date: "3/16",
          current: "有号",
        },
        {
          week: "周三",
          date: "3/17",
          current: "有号",
        },
        {
          week: "周四",
          date: "3/18",
          current: "有号",
        },
        {
          week: "周五",
          date: "3/19",
          current: "有号",
        },
        {
          week: "周六",
          date: "3/20",
          current: "有号",
        },
        {
          week: "周日",
          date: "3/21",
          current: "有号",
        },
      ],
      value: 0,
      itemtext: "",
    };
  },
  computed: {
    team() {
      let res;
      this.data.forEach((item) => {
        if (item._id == this.id) {
          res = item;
          //   console.log(res, "=========");
        }
      });
      return res;
    },
  },
  methods: {
    clinicAction(index) {
      this.value = index;
    },
    NumberAction(tt) {
      console.log(this.id);
      console.log(this.value);
      console.log(this.tiemList[this.value]);
      let week = this.tiemList[this.value].week;
      let date = this.tiemList[this.value].date.replace("/", "-");
      let time = tt.slice(0, 2);
      let str = `${week} ${date} ${time}`;
      this.$store.commit("doctor/setday", str);
      this.$router.push({
        name: "SelectTimePeriod",
        params: { text: "选择时段", id: this.id, itemtext: this.itemtext },
      });
    },
  },
  created() {
    console.log(this.$store);
    this.$store.dispatch("DoctorList/doctorData");
    // this.$store.commit("DoctorList/doctorDetails")
    // console.log(this.$route.params.id, "666666");
    // console.log(this.$store.state.DoctorList.expertDeam, "22");
    this.data = this.$store.state.DoctorList.expertDeam;
    this.id = this.$route.params.id;
    this.itemtext = this.$route.params.item;
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
.team {
  position: relative;
  z-index: 1;
  top: 46px;
  left: 0;
  height: calc(100% - vw(46));
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .team_expertise {
    height: vw(285);
    width: 100%;
    background-color: #fff;
    padding-left: vw(18);
    padding-right: vw(20);
    box-sizing: border-box;
    .team_expertise_tltle {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(16);
      color: #333;
      padding-top: vw(14);
    }
    .content {
      font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
      font-weight: 400;
      font-style: normal;
      color: #000000;
      line-height: vw(28);
      font-size: vw(13);
      padding-top: vw(10);
      padding-bottom: vw(15);
    }
    .team_members {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(12);
      padding-bottom: vw(25);
      .member {
        font-size: vw(16);
        color: #333;
      }
      .num {
        color: #999;
        padding: 0 vw(5);
      }
      .whole {
        float: right;
        color: #999;
        line-height: vw(18);
      }
    }
    .team_list {
      display: flex;
      .specific_members {
        position: relative;
        width: 25%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: vw(50);
          height: vw(50);
          padding-bottom: vw(4);
        }
        span {
          font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
          font-weight: 400;
          font-style: normal;
        }
        .members_name {
          color: #000000;
          line-height: vw(28);
          font-size: vw(13);
        }
        .member_position {
          font-size: vw(12);
          color: #999999;
          line-height: vw(28);
        }
        .leading_expert {
          position: absolute;
          top: vw(40);
          background-color: rgba(46, 199, 201, 1);
          color: #fff;
          font-family: "微软雅黑";
          font-size: vw(12);
          padding: vw(4);
          border-radius: vw(2);
          font-weight: 400;
          transform: scale(0.8);
        }
      }
    }
  }
  //预约号源
  .appointment_number_source {
    margin-top: vw(10);
    background-color: #fff;
    box-sizing: border-box;
    .title {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(16);
      color: #333;
      padding-left: vw(18);
      padding-top: vw(15);
      padding-bottom: vw(15);
    }
    // 时间
    .clinic {
      height: vw(66);
      background-color: #fff;
      border-top: 1px solid rgba(242, 242, 242, 1);
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      display: flex;
      overflow: auto;
      width: 100%;
      &::-webkit-scrollbar {
        display: none;
      }
      li {
        flex-shrink: 0;
        display: flex;
        border-right: 1px solid rgba(242, 242, 242, 1);
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
        width: vw(59);
        cursor: pointer;
        span {
          font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
          font-weight: 400;
          font-style: normal;
          font-size: vw(12);
          color: #000000;
        }
      }
      .active {
        background-color: #2ec7c9;
        span {
          color: #fff;
        }
      }
    }

    //提示
    .prompt {
      padding-left: vw(16);
      padding-top: vw(15);
      padding-bottom: vw(15);
      box-sizing: border-box;
      img {
        width: vw(15);
        height: vw(15);
        float: left;
        padding-right: vw(10);
      }
      span {
        font-family: "微软雅黑";
        font-weight: 400;
        font-style: normal;
        font-size: vw(14);
        color: #333333;
      }
    }

    // 号源
    .morning,
    .afternoon {
      .morning_title {
        font-family: "微软雅黑";
        font-weight: 400;
        font-style: normal;
        font-size: vw(16);
        margin-left: vw(15);
        padding-left: vw(2);
        margin-top: vw(15);
        margin-bottom: vw(15);
        color: #333;
        border-left: vw(4) solid #2ec7c9;
      }
      .morning_list {
        position: relative;
        margin-left: vw(18);
        margin-right: vw(15);
        font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #333;

        // 价格
        .morning_list_price {
          position: absolute;
          color: #ec5c28;
          left: vw(210);
        }
        .morning_list_num {
          position: absolute;
          right: 0;
          top: vw(-5);
          color: #fff;
          background-color: #2ec7c9;
          padding: vw(5);
          border-radius: vw(3);
        }
        .booked {
          background-color: transparent;
          color: #999;
        }
      }
      .morning_context {
        margin-left: vw(18);
        margin-right: vw(30);
        margin-top: vw(10);
        padding-bottom: vw(15);
        font-family: "MicrosoftYaHei", "微软雅黑 Regular", "微软雅黑";
        font-weight: 400;
        font-style: normal;
        color: #999999;
        line-height: vw(28);
        font-size: vw(12);
      }
    }
  }
}
</style>
